import { fileURLToPath, URL } from "node:url";
import { defineConfig, loadEnv } from "vite";
import path, { resolve } from "node:path";
import vue from "@vitejs/plugin-vue";
// 组件按需导入
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// px-vw 移动端适配方案
import postcsspxtoviewport from "postcss-px-to-viewport";
// import postcsspx2rem from 'postcss-px2rem'
// import postcsspluginpx2rem from 'postcss-plugin-px2rem'

// 将name属性自动注入到script标签中
import VueSetupExtend from "vite-plugin-vue-setup-extend";
// 高德地图
// import resolveExternalsPlugin from "vite-plugin-resolve-externals";
// svg
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import svgLoader from "vite-svg-loader";


// gzip插件
// import viteCompression from 'vite-plugin-compression'

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, __dirname);
  console.log("mode", mode);
  console.log("env", env);
  return {
    base: env.VITE_PUBLIC_URL,
    plugins: [
      vue(),
      VueSetupExtend(),
      // resolveExternalsPlugin({ AMap: "AMap" }),
      /** 将 SVG 静态图转化为 Vue 组件 */
      svgLoader({ defaultImport: "url" }),
      /** SVG */
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), "src/icons/svg")],
        symbolId: "icon-[dir]-[name]",
      }),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      // viteCompression({
      //   filter: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, // 需要压缩的文件
      //   threshold: 1024, // 文件容量大于这个值进行压缩
      //   algorithm: 'gzip', // 压缩方式
      //   ext: 'gz', // 后缀名
      //   deleteOriginFile: true, // 压缩后是否删除压缩源文件
      // }),
      // new PrerenderSPAPlugin({
      //   routes:['/','/about','/seek'],
      // })
    ],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
    build: {
      assetsInlineLimit:0,
      /** Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效 */
      minify: "terser",
      assetsDir: "static",
      /** 在打包代码时移除 console.log、debugger 和 注释 */
      terserOptions: {
        compress: {
          //生产环境时移除console
          drop_console: true,
          drop_debugger: true,
        },
        format: {
          /** 删除注释 */
          comments: false,
        },
      },
      rollupOptions: {
        // 将所有的未使用资源进行移除
        manualChunks: undefined,
        input: {
          index: resolve(__dirname, "index.html"),
        },
        // 配置构建后的文件名
        output: {
          entryFileNames: "static/js/[name]-[hash].js",
          chunkFileNames: "static/js/[name]-[hash].js",
          assetFileNames: "static/[ext]/[name]-[hash].[ext]",
        },
      },
    },
    json: {
      stringify: true,
    },
    // 开发服务器选项配置
    server: {
      /** 是否开启 HTTPS */
      https: false,
      /** 设置 host: true 才可以使用 Network 的形式，以 IP 访问项目 */
      host: true, // host: "0.0.0.0"
      /** 端口号 */
      port: 3333,
      /** 是否自动打开浏览器 */
      open: false,
      /** 跨域设置允许 */
      cors: true,
      /** 端口被占用时，是否直接退出 */
      strictPort: false,
      proxy: {
        [env.VITE_BASE_URL]: {
          target: env.VITE_TARGET_URL,
          ws: true, //如果要代理 websockets，配置这个参数
          /** 是否允许跨域 */
          changeOrigin: true,
          // rewrite: (path) => path.replace(/^\/api/, '')
        },
      },
    },
    css: {
      //  CSS 预处理器的选项
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/assets/variable.scss";`,
        },
      },
      
      postcss: {
        plugins: [
          postcsspxtoviewport({
            // 要转化的单位
            unitToConvert: 'px',
            // UI设计稿的大小
            viewportWidth: 1920,
            // 转换后的精度
            unitPrecision: 6,
            // 转换后的单位
            viewportUnit: 'vw',
            // 字条转换后的单位
            fontViewportUnit: 'vw',
            // 能转换的属性，*表示所有属性，!border表示border不转
            propList: ['*'],
            // 指定不转换为视窗单位的类名，
            selectorBlackList: ['ignore-'],
            // 最小转换的值，小于等于1不转
            minPixelValue: 1,
            // 是否在媒体查询的css代码中也进行转换，默认false
            mediaQuery: false,
            // 是否转换后直接更换属性值
            replace: true,
            // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
            exclude: /node_modules/i,
            // 包含那些文件或者特定文件
            include: [],
            // 是否处理横屏情况
            landscape: false
          })
        ]
      }
    },
  };
});
